<template>
  <div id="DetailPage">
    <!-- <div class="title">
      <span @click="onClickLeft" style="position: absolute;left: 5px;display: flex;align-items: center;font-size: 14px;">
        <van-icon name="arrow-left" />
        返回
      </span>
      农房审批
    </div> -->
    <div class="content">
      <p style="background: #F2F4FF;height: 44px;line-height: 44px;padding: 0 16px;font-size: 14px;">户主信息</p>
      <van-field v-model="form.HOUSEID" label="户号" />
      <van-field v-model="form.HOUSEAPPLICANT" label="姓名" />
      <van-field v-model="form.CERTIFICATECODE" label="身份证号" />
      <van-field v-model="form.PERMANENTADDR" label="户籍地址" />
      <van-field v-model="form.HOLDERISCANCEL" label="户主是否注销" />
      <van-field v-model="form.ISDEATH" label="是否死亡" />
      <van-field v-model="form.AGE" label="年龄" />
      <van-field v-model="form.ISDISEASE" label="是否享受房改" />
      <van-field v-model="form.OFFICEWORK" label="机关事业单位工作" />
      <div class="table">
        <van-collapse v-model="activeNames">
          <van-collapse-item title="户籍家庭成员信息" name="1">
            <el-table size="small" :data="tableData" border style="width: 100%">
              <el-table-column prop="FAMILYNAME" label="姓名" align="center">
              </el-table-column>
              <el-table-column prop="FAMILYSEX" label="性別" align="center">
              </el-table-column>
              <el-table-column prop="FAMILYCERTIFICATECODE" label="身份证号" align="center">
              </el-table-column>
              <el-table-column prop="FAMILYAGE" label="年龄" align="center">
              </el-table-column>
            </el-table>
          </van-collapse-item>
          <van-collapse-item title="村集体股东信息" name="2">
            <van-field readonly clickable name="picker" :value="value" label="审批结果" @click="showPicker = true" />
            <van-popup v-model="showPicker" position="bottom" get-container="#popup">
              <van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
            </van-popup>
            <van-field v-model="text" label="审批意见：   " />
            <p style="text-align: right;margin-top: 10px;">张静 2021.12.15 22:20</p>
          </van-collapse-item>
        </van-collapse>
      </div>

    </div>
    <div class="bottom">
      <van-button style="margin-right: 10px;width: 20vw;" size="small" type="info" @click="getinsertDataView">提交</van-button>
      <van-button size="small" @click="handleGoToLine" type="info">办理过程</van-button>
      <van-button size="small" @click="handleGoToLocation" style="margin-left: 10px;" type="info">电子地图</van-button>
    </div>
  </div>
</template>
<script>

import {
  insertDataView
} from '../../utils/api'
export default {
  data () {
    return {
      activeNames: ['1', '2'],
      text: '',
      value: '',
      form: {
        houseid: '',
        HOUSEAPPLICANT: '',
        CERTIFICATECODE: '',
        permanentaddr: '',
        holderiscancel: '',
        isdeath: '',
        age: '',
        isdisease: '',
        officework: ''
      },
      columns: ['审批通过', '审批未通过'],
      showPicker: false,
      tableData: [
        {
          name: '汪忠军'
        },
        {
          name: '汪美君'
        },
        {
          name: '汪陈鑫'
        },
        {
          name: '金莲女'
        }
      ]
    }
  },
  methods: {
    getinsertDataView: async function () {

      this.$router.push({
        path: "/TreeSelect1",
        query: { data: this.form }
      });
    },
    onClickLeft () {
      this.$router.push({
        path: "/MyTodoList",
      });
    },
    onConfirm (value) {
      this.value = value;
      this.showPicker = false;
    },
    handleGoToLine () {
      this.$router.push({
        path: "/KeyLine",
        query: { PROC_GUID: this.form.PROC_GUID }
      });
    },
    handleGoToLocation () {
      this.$router.push({
        path: "/oneMapLocation",
        query: { data: JSON.stringify(this.form) }
      });
    },
  },
  mounted () {
    this.form = this.$route.query.data[0]
    this.text = this.form.ZGSHYJ
    this.tableData = []
    if (this.$route.query.data2.length > 0) {
      this.tableData.push(this.$route.query.data2[0])
      this.tableData.push(this.$route.query.data2[1])
    }
    if (ZWJSBridge) {
      ZWJSBridge.setTitle({
        "title": "农房审批"
      }).then(res => {
      }).catch(err => {
      })
    }
  }
}
</script>
<style lang="scss" scoped>
#DetailPage {
  background: #ffffff;
  font-size: 14px;
  .title {
    width: 100%;
    height: 50px;
    background: #007aff;
    line-height: 50px;
    text-align: center;
    color: #ffffff;
    font-size: 20px;
    position: relative;
  }
  .content {
    height: calc(100vh - 100px);
    overflow: auto;
  }
  .bottom {
    padding: 10px;
    text-align: center;
  }
}
</style>
<style lang="scss">
.table .van-collapse-item__title {
  background: #f2f4ff !important;
}
.van-collapse-item__content .van-cell {
  background: #fff !important;
}
.content {
  .van-field__control {
    text-align: right !important;
  }
}
</style>
